<template>
  <div>
    <nav-bar @clickTitle="navTitleChange">
      <template #left>
        <span class="yk-nb-btn">
          <yk-icon type="sort" />
        </span>
      </template>
      {{navTitle}}
      <template #right>
        <span class="yk-nb-btn right">
          <yk-icon type="add" />
        </span>
      </template>
    </nav-bar>
    <yk-calendar
      v-model:date="calendarDate"
      @update:date="onCalendarChange"
    >
    </yk-calendar>
    <van-popup
      v-model:show="showDatePicker"
      :round="true"
      position="bottom"
      overlay-class="date-picker"
    >
      <div class="date-picker-content">
        <van-datetime-picker
          v-model="now"
          type="date"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="cancelDatePick"
          @confirm="confirmDatePick"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import navBar from '@/components/navbar'
import {preZero} from '@/utils/common'
import { ref } from '@vue/reactivity'
import ykCalendar from '@/components/calendar'
import ykIcon from '@/components/icons'
export default {
  components: {navBar, ykCalendar, ykIcon},
  setup(){
    const date = new Date()
    const now = ref(date)  // 日期选择器
    const calendarDate = ref(date) // 日历
    const formatTitle = date => `${date.getFullYear()}年${preZero(date.getMonth()+1)}月` // 导航标题格式化
    let navTitle = ref(formatTitle(date))
    let showDatePicker = ref(false)
    // 点击导航标题
    const navTitleChange = () => {
      showDatePicker.value = true
    }
    const cancelDatePick = () => {
      showDatePicker.value = false
    }
    const confirmDatePick = date => {
      showDatePicker.value = false
      calendarDate.value = date
      navTitle.value = formatTitle(date)
    }
    const onCalendarChange = date => {
      navTitle.value = formatTitle(date)
      now.value = date
    }

    return {
      now,
      calendarDate,
      navTitle,
      showDatePicker,
      navTitleChange,
      minDate: new Date(2021, 7, 27),
      maxDate: new Date(2050, 12, 30),
      cancelDatePick,
      confirmDatePick,
      onCalendarChange,
    }
  }
}
</script>

<style lang="less">
.date-picker{
  background: rgba(255, 255, 255, 0);
}
.van-popup--bottom{
  box-shadow: 0 -0.3rem 0.3rem rgba(0,0,0,.05);
}
.date-picker-content{
  min-height: 12.5rem;
}
</style>
<style lang="less" scoped>
.yk-nb-btn{
  height: 2rem;
  width: 2rem;
  flex: 0 0 2rem;
  line-height: 2rem;
  display: inline-flex;
  align-items: center;
  svg{
    width: 1.6em;
    height: 1.6em;
    flex: 0 0 1.6em;
    path{
      fill: @title-color;
    }
  }
  &.right{
    justify-content: flex-end;
  }
}
</style>